<template>
  <div>
    <!--面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="4">
          <!-- 添加分类按钮 -->
          <div>
            <el-button type="primary" @click="showaddcategories()"
              >添加分类</el-button
            >
          </div>
        </el-col>
      </el-row>
      <!-- 商品分类表单 -->
      <tree-table
        :data="categoriesList"
        :columns="columns"
        :show-index="true"
        :selection-type="false"
        :expand-type="false"
        :border="true"
      >
        <template slot="isok" slot-scope="scope">
          <i
            class="el-icon-success"
            v-if="scope.row.cat_deleted == false"
            style="color: lightgreen"
          ></i>
          <i class="el-icon-error" v-else style="color: red"></i>
        </template>
        <template slot="level" slot-scope="scope">
          <el-tag v-if="scope.row.cat_level == 0" effect="dark">一级</el-tag>
          <el-tag
            type="success"
            v-else-if="scope.row.cat_level == 1"
            effect="dark"
            >二级</el-tag
          >
          <el-tag type="warning" v-else effect="dark">三级</el-tag>
        </template>
        <template slot="operate" slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="editcate(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            icon="el-icon-delete"
            @click="deletecate(scope.row.cat_id)"
            >删除</el-button
          >
        </template>
      </tree-table>
    </el-card>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[2, 5, 10, 20]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 编辑分类名称弹窗 -->
    <el-dialog title="编辑分类" :visible.sync="dialogVisibleEdit" width="30%">
      <el-form :model="editcateinfo" label-width="80px">
        <el-form-item label="分类名称">
          <el-input v-model="editcateinfo.cat_name"> </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="dialogVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="editcategories()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 添加分类弹框 -->
    <el-dialog title="添加分类" :visible.sync="dialogVisibleAdd" width="30%">
      <el-form :model="addCateGories" label-width="80px">
        <el-form-item label="分类名称">
          <el-input v-model="addCateGories.cat_name"> </el-input>
        </el-form-item>
        <el-form-item label="父级分类">
          <el-cascader
            expand-trigger="hover"
            :options="categoriesListAll"
            :props="cateProps"
            v-model="selectKeys"
            :clearable="true"
            @change="cateChange()"
          >
          </el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="dialogVisibleAdd = false">取 消</el-button>
        <el-button type="primary" @click="addCateGoriesInfo()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryInfo: {
        type: [1, 2, 3],
        pagenum: 2,
        pagesize: 10,
      },
      total: 1,
      categoriesList: [],
      categoriesListAll: [],
      addCateGories: {
        cat_pid: 0,
        cat_name: "",
        cat_level: 0,
      },
      columns: [
        { label: "分类名称", prop: "cat_name" },
        { label: "是否有效", type: "template", template: "isok" },
        { label: "排序", type: "template", template: "level" },
        { label: "操作", type: "template", template: "operate" },
      ],
      editcateinfo: {},
      dialogVisibleEdit: false,
      dialogVisibleAdd: false,
      cateProps: {
        value: "cat_id",
        label: "cat_name",
        children: "children",
        checkStrictly: true,
      },
      selectKeys: [],
    };
  },
  created() {
    this.getCategories();
  },
  methods: {
    //获取商品分类列表
    async getCategories() {
      const { data: res } = await this.$http.get("categories", {
        params: this.queryInfo,
      });
      // console.log(res);
      if (res.meta.status != 200) return this.$message.error("获取失败");
      // this.$message.success(res.meta.msg);
      this.categoriesList = res.data.result;
      this.total = res.data.total;
    },
    //获取所有商品分类
    async getAllCategories() {
      const { data: res } = await this.$http.get("categories");
      console.log(res);
      if (res.meta.status != 200) return this.$message.error("获取失败");
      // this.$message.success(res.meta.msg);
      this.categoriesListAll = res.data;
      this.total = res.data.length;
    },
    //分页,每页显示量改变
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize;
      this.getCategories();
    },
    //换页
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage;
      this.getCategories();
    },
    //打开编辑分类弹窗
    editcate(edit) {
      this.editcateinfo = edit;
      this.dialogVisibleEdit = true;
    },
    //发送修改分类请求
    async editcategories() {
      const { data: res } = await this.$http.put(
        "categories/" + this.editcateinfo.cat_id,
        { cat_name: this.editcateinfo.cat_name }
      );
      // console.log(res);
      if (res.meta.status != 200) return this.$message.error("更新失败");
      this.dialogVisibleEdit = false;
      this.$message.success(res.meta.msg);
      this.getCategories();
    },
    //删除分类
    deletecate(id) {
      this.$confirm("此操作将永久删除该分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const { data: res } = await this.$http.delete("categories/" + id);
          if (res.meta.status == 400) return this.$message.error(res.meta.msg);
          if (res.meta.status !== 200) return this.$message.error("删除失败");
          this.$message.success("删除成功");
          this.getCategories();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //显示添加分类弹框
    showaddcategories() {
      this.dialogVisibleAdd = true;
      this.getAllCategories();
    },
    //级联选择器变化
    cateChange() {
      // console.log(this.selectKeys);
      if (this.selectKeys.length === 0) {
        this.addCateGories.cat_level = 0;
        this.addCateGories.cat_pid = 0;
        console.log(this.addCateGories);
        return;
      }
      if (this.selectKeys.length === 1) {
        this.addCateGories.cat_pid = this.selectKeys[0];
        this.addCateGories.cat_level = 1;
        console.log(this.addCateGories);
        return;
      }
      if (this.selectKeys.length === 2) {
        this.addCateGories.cat_pid = this.selectKeys[1];
        this.addCateGories.cat_level = 2;
        console.log(this.addCateGories);
        return;
      }
      if (this.selectKeys.length === 3) {
        this.$message.error("无法为该分类添加子分类！");
        return;
      }
    },
    //发送增加分类请求
    async addCateGoriesInfo() {
      const { data: res } = await this.$http.post(
        "categories",
        this.addCateGories
      );
      console.log(res);
      if (res.meta.status != 201) return this.$message.error("创建失败");
      this.$message.success(res.meta.msg);
      this.getCategories();
      this.dialogVisibleAdd = false;
    },
  },
};
</script>
<style lang='less' scoped>
</style>